<template>
	<pd-popup ref='popup' type='bottom'>
		<view class="__pd_plate_keyboard">
			<view class="__pd_plate_keyboard_header flex jcsb">
				<view @tap="cancelHandler">取消</view>
				<view class="_text_weight_bold _text_size_32">{{plate}}</view>
				<view class="primary-color" @tap="confirmHandler">确认</view>
			</view>
			<view class="__pd_plate_keyboard_items">
				<view class="__pd_plate_keyboard_item __plate_item"
					v-for="(item, index) in (isAbc ? abc : CHN_PROVINCES)" 
					:key='index'
					hover-class="__pd_plate_keyboard_item_active"
					:hover-stay-time="100"
					@tap="keyboardTapHandler(item)">
					{{item}}
				</view>
				<view class="__pd_plate_keyboard_item __abc" @tap="isAbc = !isAbc">
					<text :class="{'__abc_active' : !isAbc}">中</text>
					<text>/</text>
					<text :class="{'__abc_active' : isAbc}">英</text>
				</view>
				<view class="__pd_plate_keyboard_item __delete" @tap="deleteHandler">
					<text class="iconfont">&#xe751;</text>
				</view>
			</view>
		</view>
	</pd-popup>
</template>

<script lang="ts" setup>
import { CHN_PROVINCES } from '../config';
import { useCompRef } from '../hooks/useRefs';
import PD from '../libs';
import type { TsHelp } from '../libs/ts-help';
import PdPopup from './pd-popup.vue';
const popup = useCompRef(PdPopup);
const props = withDefaults(defineProps<{
	fillText : string,//填充在车牌简的文案，闽D·123456，fillText = ·
}>(), {
	fillText : '·',
});


const abc = [
	'1','2','3','4','5','6','7','8','9','0',
	'A','B','C','D','E','F','G','H','I','J',
	'K','L','M','N','O','P','Q','R','S','T',
	'U','V','W','X','Y','Z'
];
const isAbc = ref(false);
const plate = ref('');
const result = computed(() => {
	return props.fillText ? plate.value.split(props.fillText).join('') : plate.value;
});

let resolver : TsHelp.PromiseResolver<{value : string}>;
let rejecter : () => void;
const open = () : Promise<{value : string}> => {
	return new Promise((r,j) => {
		resolver = r;
		rejecter = j;
		popup.value?.open();
	});
};

const keyboardTapHandler = (value : string) => {
	if (plate.value.length >= 8 + props.fillText.length) return; // +1是给车牌号中的·留位置
	wx.vibrateShort({
		type : 'light'
	});
	plate.value += plate.value.length === 2 ? `${props.fillText}${value}` : value;
};

const deleteHandler = () => {
	if (plate.value.length <= 0) return;
	plate.value = plate.value.substring(
		0, 
		(plate.value.length === 4 && props.fillText.length) ? plate.value.length - 2 : plate.value.length - 1
	);
};

const confirmHandler = () => {
	if (result.value.length <= 0) {
		PD.UniHelp.toast('请输入您的车牌号');
		return;
	};
	if (!PD.Validate.isPlate(result.value)) {
		PD.UniHelp.toast('车牌号码不合法，请重新输入');
		return;
	};
	
	resolver && resolver({
		value : result.value
	});
	popup.value?.close();
};



const cancelHandler = () => {
	plate.value = '';
	isAbc.value = false;
	
	rejecter && rejecter();
	popup.value?.close();
};

defineExpose({
	open,
});

</script>

<style lang="less">
.__pd_plate_keyboard {
	background: #fff;
	border-radius: 16rpx 16rpx 0 0;
};
.__pd_plate_keyboard_header {
	padding: 30rpx 20rpx;
	font-size: 28rpx;
};
.__pd_plate_keyboard_items {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 10rpx;
	padding: 32rpx 10rpx;
	background: #f1f1f1;
	--size : 64rpx;
	.__pd_plate_keyboard_item {
		height: var(--size);
		// border: 1px solid #eee;
		background: #fff;
		font-size: 30rpx;
		border-radius: 8rpx;
		color: #333;
		text-align: center;
		line-height: var(--size);
		box-shadow: 1px 1px #c7c7c7;
	}
	.__plate_item {
		width: var(--size);
	}
	.__pd_plate_keyboard_item_active {
		background: #ccc !important;
	}
	.__abc {
		background: #d0d0d0;
		grid-row-start: 4;
		grid-column: 1 / 3;
	}
	.__abc_active {
		color: var(--primary);
	}
	.__delete {
		background: #d0d0d0;
		grid-row-start: 4;
		grid-column: 9 / 11;
	}
}
</style>